<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <!-- 使用组件 -->
      <!-- <test-component /> -->
      <hello-component></hello-component>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      // 定义组件
      const TestComponent = Vue.extend({
        // 组件配置对象

        // data有两种写法
        // 对象形式
        // 函数形式（组件中必须用函数形式）
        data() {
          return {
            num: 0,
          };
        },
        methods: {
          handleClick() {
            this.num++;
          },
        },
        // 模板页面
        template:
          '<div><p>{{num}}</p><button @click="handleClick">按钮</button></div>',
      });

      // const HelloComponent = Vue.extend({
      //   data() {
      //     return {
      //       msg: "hello",
      //     };
      //   },
      //   template: "<p>{{msg}}</p>",
      // });
      // 注册全局组件
      // 组件&定义组件
      // Vue.component('TestComponent', TestComponent);
      Vue.component("hello-component", {
        data() {
          return {
            msg: "hello",
          };
        },
        template: "<p>{{msg}}</p>",
      });

      new Vue({
        el: "#root",
        // 注册局部组件
        // components: {
        // TestComponent,
        // TestComponent: {
        //   // 组件配置对象
        //   // data有两种写法
        //   // 对象形式
        //   // 函数形式（组件中必须用函数形式）
        //   data() {
        //     return {
        //       num: 0,
        //     };
        //   },
        //   methods: {
        //     handleClick() {
        //       this.num++;
        //     },
        //   },
        //   // 模板页面
        //   template:
        //     '<div><p>{{num}}</p><button @click="handleClick">按钮</button></div>',
        // },
        // HelloComponent: {
        //   data() {
        //     return {
        //       msg: "hello",
        //     };
        //   },
        //   template: "<p>{{msg}}</p>",
        // },
        // },
      });
    </script>
  </body>
</html>
